<template>
	<view class="content">
		<view class="line-center"><view class="receive-button" v-if="receive" @click="receiveOrder()">我要接单</view></view>
		<view v-if="!receive">
			<view class="title-text">配送中</view>
			<view class="order-item" v-if="deliveOrder.orderCode">
				<view class="line-two">
					<view class="order-item-text">{{deliveOrder.orderCode}}</view>
					<view class="order-item-text">{{deliveOrder.goodsName}}</view>
				</view>
				<view class="line-two">
					<view class="order-item-text">{{deliveOrder.orderMadeTime.replace('T',' ')}}</view>
				</view>
				<view class="line-two">
					<view class="order-item-text">已接单</view>
					<view class="order-button" @click="orderFinish()">配送完成</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style>
.content {
	width: 750rpx;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.line-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.receive-button {
	margin-top: 20%;
	font-size: 120%;
	background-color: #55baa5;
	width: 350rpx;
	height: 80rpx;
	color: #ffffff;
	border-radius: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.title-text {
	padding-top: 60rpx;
	padding-left: 5%;
	font-size: 120%;
	font-weight: bold;
}
.order-item {
	border-top: 2rpx #000 solid;
	margin-top: 30rpx;
}
.line-two {
	display: flex;
	margin: 4% 5%;
	align-items: center;
	justify-content: space-between;
}
.order-button {
	font-size: 110%;
	background-color: #55baa5;
	width: 200rpx;
	height: 60rpx;
	color: #ffffff;
	border-radius: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.order-item-text {
	font-size: 110%;
}
</style>
<script>
export default {
	data() {
		return {
			receive: true,
			deliveOrder:{}
		};
	},
	methods: {
		receiveOrder() {
			uni.showLoading({
				title:'正在接单'
			})
			uni.request({
				url:'http://localhost:8080/api/orders/waiting-deliver',
				success:(res)=>{
					if(res.statusCode==200){
						if(res.data&&res.data.orderCode){
							this.deliveOrder=res.data;
							this.receive = false;
						}else{
							uni.showToast({
								title:"暂无派送订单",
								icon:"none"
							})
						}
					}else{
						uni.showToast({
							title:"接单失败",
							icon:"none"
						})
					}
				},
				fail:()=>{
					uni.showToast({
						title:"暂无派送订单",
						icon:"none"
					})
				},
				complete() {
					uni.hideLoading()
				}
			});
		},
		orderFinish() {
			uni.showLoading({
				title:'配送完成'
			})
			uni.request({
				url:'http://localhost:8080/api/orders/finish-deliver?orderCode='+this.deliveOrder.orderCode,
				method:'POST',
				success:(res)=>{
					if(res.statusCode==200){
						if(res.data){
							uni.showToast({
								title:"配送完成"
							})
							setTimeout(()=>{
								this.deliveOrder={};
								this.receive = true;
							},1500)
						}else{
							uni.showToast({
								title:"配送出错",
								icon:"none"
							})
						}
					}else{
						uni.showToast({
							title:"配送出错",
							icon:"none"
						})
					}
				},
				complete() {
					uni.hideLoading()
				}
			})
		}
	}
};
</script>
